import Component from "../Component.js";
import Type from "../../experience/db/Type.js";

const Draw = ol.interaction.Draw;
const Snap = ol.interaction.Snap;


export default class Track extends Component{
    constructor() {
        super();

        this.draw = null;
        this.snap = null;
        this.status = true;
    }

    cancel() {
        this.status = true;
        this.emitter.emit("restore-slector");
        this.drawer.removeInteraction(this.snap);
        this.drawer.removeInteraction(this.draw);
        this.drawer.source(Type.Modify).clear();

        this.$$("#track-add").css("background-color", "var(--primary-color)");
        this.$$("#track-add").html("巷道轨迹");
        this.toast("增加巷道轨迹动作取消。");
    }

    template() { }

    control() {
        // 接收选择器发送过来的消息
        this.emitter.on("track-deleted", async () => {
            this.emitter.locked = true;

            const id = this.emitter.params[0], self = this;
            const dialog = self.app.dialog.create({
                title: "提示",
                text: "请选择需要进行的操作？",
                buttons: [
                    {
                        text: "删除轨迹",
                        onClick: () => {
                            self.app.dialog.confirm('确认将服务器的数据删除?', async () => {
                                const config = self.algo.getConfig();
                                const data = await self.api.delTrack({
                                    id: id, meta_id: config.meta_id
                                });

                                if (data.code === 0) {
                                    await self.db.refresh(Type.Track, data.data);
                                    await self.drawer.draw(Type.Track);
                                }
                            });
                            this.emitter.emit("cancel-selected");
                            this.emitter.locked = false;
                            dialog.close();
                        }
                    }, {
                        text: "取消操作",
                        onClick: () => {
                            this.emitter.emit("cancel-selected");
                            this.emitter.locked = false;
                            dialog.close();
                        }
                    },
                ],
                verticalButtons: false
            }).open();
        });

        this.$$("#track-add").on("click", () => {
            this.status = !this.status;

            // 取消状态
            if (this.status) {
                this.cancel();
                return;
            }

            // 非取消状态
            this.$$("#track-add").css("background-color", "rgb(255, 0, 0, 1)");
            this.$$("#track-add").html("取消编辑");

            this.toast('添加一条轨迹线,双击结束; 点击Esc回退。')

            // 这里要发个消息阻止选择器
            this.emitter.emit("prevent-slector");

            const config = this.algo.getConfig();
            const mode = this.utils.getLocalStorage("mode");

            this.drawer.source(Type.Modify).clear();
            this.draw = new Draw({ source: this.drawer.source(Type.Modify) , type: 'LineString' });
            this.drawer.addInteraction(this.draw);
            this.snap = new Snap({ source: this.drawer.source(Type.Track) })
            this.drawer.addInteraction(this.snap);

            const self = this;
            window.onkeydown = function(event) {
                if (event.defaultPrevented) return;

                let handled = false;
                if (event.key === "Escape") {
                    handled = true;
                    self.draw.removeLastPoint();
                }

                if (handled) event.preventDefault();
            }

            this.draw.on('drawend', async (event) => {
                const coordinates = event.feature.getGeometry().getCoordinates();
                coordinates.forEach(point => {
                    point[0] = this.algo.denormalX(point[0]);
                    point[1] = this.algo.denormalY(point[1]);
                })

                const data = await this.api.addTrack({
                    meta_id: config.meta_id,
                    type: mode,
                    points: coordinates
                });

                if (data.code === 0) {
                    await this.db.refresh(Type.Track, data.data);
                    await this.drawer.draw(Type.Track);
                }

                this.cancel();
                window.onkeydown = null;
            });
        })

        this.$$("#car-track-cancel").on("click", async () => {
            this.popup.close();
        });
    }
}